<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
  <div class="btnWrap routeHeader">
    <div>
      <el-button 
      @click="saveData" 
      type="primary" 
      v-if="queryParam.dictPrepareStatus==100 && type!='view' "
      v-hasPermi="['produce:production-prepare-send:save']"
      >保存</el-button>
      <el-button 
      @click="submitData"
       type="primary" 
       v-if="queryParam.dictPrepareStatus==100 && type!='view' "
       v-hasPermi="['produce:production-prepare-send:sumbit']"
       >提交</el-button>
      <el-button 
      @click="cancelData" 
      type="primary"
      v-if="queryParam.dictPrepareStatus==100 && type!='view'"
      v-hasPermi="['produce:production-prepare-send:cancel']"
      >作废</el-button>
      <el-button 
      @click="withdrawData" 
      type="primary"
      v-if="queryParam.dictPrepareStatus==60 && type!='view'"
      v-hasPermi="['produce:production-prepare-send:withdraw']"
      >撤回</el-button>
      <el-button 
      @click="print" 
      type="primary"
      v-if="type=='view'"
      v-hasPermi="['produce:production-prepare-send:print']"
      >打印</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </div>
  <el-scrollbar :style="`height:${contentHeight - 63}px`">
  <ContentWrap>
    <div>基本信息</div>
    <el-form class="-mb-5px" :model="queryParam" :inline="true" label-width="110px">
      <el-form-item label="清单编号" prop="prepareNumber">
        <div class="select-wrapper">
          <el-input v-model="queryParam.prepareNumber" readonly :disabled="type=='view'" class="!w-220px" />
          <span class="search-icon" @click="handQueryInventory()">
            <Icon icon="ep:search" />
          </span>
        </div>
      </el-form-item>
      <el-form-item label="订单号" prop="orderNumber">
        <el-input v-model="queryParam.orderNumber" class="!w-220px" disabled />
      </el-form-item>
      <el-form-item label="订单类型" prop="dictOrderType">
        <el-select
          v-model="queryParam.dictOrderType"
          placeholder="请选择订单类型"
          clearable
          class="!w-220px"
          disabled
        >
          <el-option
            v-for="(dict, index) in getIntDictOptions(DICT_TYPE.MARKET_ORDER_TYPE)"
            :key="index"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户代码" prop="customerCode">
        <el-input v-model="queryParam.customerCode" class="!w-220px" disabled />
      </el-form-item>
      <el-form-item label="客户名称" prop="customerName">
        <el-input v-model="queryParam.customerName" class="!w-220px" disabled />
      </el-form-item>
      <el-form-item label="产品编码" prop="productNumber">
        <el-input v-model="queryParam.productNumber" class="!w-220px" disabled />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input v-model="queryParam.productName" class="!w-220px" disabled />
      </el-form-item>
      <el-form-item label="产品规格" prop="productStandard">
        <el-input v-model="queryParam.productStandard" class="!w-220px" disabled />
      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap>
    <div class="btnWrap">
      <div>清单明细</div>
    </div>
    <el-table v-loading="loading" :data="list" :height="tableHeight" border>
      <el-table-column type="index" width="55" label="序号" align="center" />
      <!-- 列定义 -->
      <el-table-column align="center" width="180">
        <template #header>
          <span>部件编码</span>
        </template>
        <template #default="scope"> {{ scope.row.partNumber }} </template>
      </el-table-column>
      <el-table-column align="center" width="180">
        <template #header>
          <span>部件名称</span>
        </template>
        <template #default="scope">
        <button @click="partNameView(scope.row.id)" class="isBtn" v-if="scope.row.isBox==1"> {{ scope.row.partName }}</button>
        <span v-else>{{ scope.row.partName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="180">
        <template #header>
          <span>部件规格</span>
        </template>
        <template #default="scope"> {{ scope.row.partSpecification }} </template>
      </el-table-column>
      <el-table-column align="center" width="180">
        <template #header>
          <span>图纸图号</span>
        </template>
        <template #default="scope"> {{ scope.row.partDrawingNumber }} </template>
      </el-table-column>
      <el-table-column align="center" width="180">
        <template #header>
          <!-- <span style="color: red">*</span> -->
          <span>备货数量</span>
        </template>
        <template #default="scope"> {{ scope.row.prepareQuantity }} </template>
      </el-table-column>
      <el-table-column align="center" width="180">
        <template #header>
          <!-- <span style="color: red">*</span> -->
          <span>待发货数量</span>
        </template>
        <template #default="scope"> {{ scope.row.prepareRemaQuantity }} </template>
      </el-table-column>
      <el-table-column align="center" width="180">
        <template #header>
          <span>单位</span>
        </template>
        <template #default="scope"> {{ scope.row.partUnit }} </template>
      </el-table-column>
      <el-table-column label="入库类型" prop="dictIncomingType" width="120"  align="center">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.INCOMING_TYPE" :value="scope.row.dictIncomingType" />
          </template>
        </el-table-column>
      <el-table-column label="仓库名称" align="center" width="180">
        <template #default="scope"> {{ scope.row.warehouseName }} </template>
      </el-table-column>
      <!-- <el-table-column label="校对意见" align="center" width="180" v-if="queryParam.dictPrepareStatus==40">
        <template #default="scope"> {{ scope.row.proofreaderOpinion }} </template>
      </el-table-column> -->
    </el-table>
  </ContentWrap>
  <ContentWrap v-if="queryParam.dictPrepareStatus==40">
    <div>校对意见</div>
      <el-form-item label="校对意见" prop="proofreaderOpinion">
          <el-input
            v-model="queryParam.proofreaderOpinion"
            type="textarea"
            disabled
            class="!w-1000px"
          />
        </el-form-item>
  </ContentWrap>
</el-scrollbar>
  <!-- 选择清单 -->
  <selectInventory ref="formRefInventory" @success="getInventory" />
  <!-- 打印 -->
  <div v-show="false" id="printData">
  <Print :info="queryParam" :list="dataList" :dataListLength="dataListLength" />
  </div>
</div>
</template>
<script lang="ts" setup>
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import { useRoute } from 'vue-router'
  import * as ProductionPrepareSendApi from '@/api/produce/productManagement/productionPrepareSend'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import selectInventory from './selectInventory.vue'
  import Print from './print.vue'
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const route = useRoute()
  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  const queryParam = ref({
    orderNumber: undefined,
    dictOrderType: undefined,
    customerCode: undefined,
    customerName: undefined,
    productNumber: undefined,
    productName: undefined,
    productStandard: undefined,
    inventoryNumber: undefined,
    productionPrepareDetailCreateReqVOS:[]
  })
  const { push } = useRouter()
  const loading = ref(false)
  const list = ref<any>([])
  const formLoading = ref(false)
  const formRefInventory = ref()
  const handQueryInventory = () => {
    if(type.value=='view') return
    formRefInventory.value.open(queryParam.value.orderNumber, queryParam.value.productNumber)
  }
  
  //获取清单数据
  const getInventory = (data) => {
    queryParam.value.prepareNumber = data.list[0].prepareNumber
    queryParam.value.orderNumber = data.list[0].orderNumber
    queryParam.value.customerName = data.list[0].customerName
    queryParam.value.productNumber = data.list[0].productNumber
    queryParam.value.productName = data.list[0].productName
    list.value = []
    list.value =  data.list[0].productionPrepareDetailRespVOS
  }


  /**保存 */
  const saveData = async () => {
      queryParam.value.productionPrepareDetailCreateReqVOS = list.value
      if (type.value === 'update') {
        await ProductionPrepareSendApi.saveProductionPrepareSend(queryParam.value)
        message.success(t('保存成功'))
        tagsViewStore.delView(routes.currentRoute.value)
        push('/produce/produce/productManagement/productionPrepareSend')
      }
  }
  /**提交 */
  const submitData = async () => {
      queryParam.value.productionPrepareDetailCreateReqVOS = list.value
      if (type.value === 'update') {
        await ProductionPrepareSendApi.submitProductionPrepareSend(queryParam.value)
        message.success(t('提交成功'))
        tagsViewStore.delView(routes.currentRoute.value)
        push('/produce/produce/productManagement/productionPrepareSend')
      } 
  }

  /**作废 */
  const cancelData = async () => {
    queryParam.value.productionPrepareDetailCreateReqVOS = list.value
    if (type.value === 'update') {
        await ProductionPrepareSendApi.cancelProductionPrepareSend(queryParam.value)
        message.success(t('已作废'))
        tagsViewStore.delView(routes.currentRoute.value)
        push('/produce/produce/productManagement/productionPrepareSend')
      } 
  }

  /**撤回 */
  const withdrawData = async ()=>{
    queryParam.value.productionPrepareDetailCreateReqVOS = list.value
    if (type.value === 'update') {
        await ProductionPrepareSendApi.withdrawProductionPrepareSend(queryParam.value)
        message.success(t('已撤回'))
        tagsViewStore.delView(routes.currentRoute.value)
        push('/produce/produce/productManagement/productionPrepareSend')
      } 
  }

  /**关闭 */
  const close = () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/produce/produce/productManagement/productionPrepareSend')
  }

  // 查看集装箱清单
  const partNameView = (id)=>{
    let dataType = 'sendView'
    let rowId = id
    push({
    path:'/produce/produce/productManagement/productionPreparePackingForm',
    query: {
      type: dataType,
      id:rowId,
      sendId:route.query.id
    }
  })
  }

  // 打印领料单
const print = () => {
  // 新建窗口
  let winName, head, bdHtml;
  winName = window.open("", "_blank", ""); // 新窗口
  head = '<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />'
  const tabStyle = `
  <style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    text-align: center;
    padding: 8px;
    border: 1px solid black;
  }
  </style>
  `
  head += tabStyle;
  bdHtml = window.document.querySelector("#printData").innerHTML;
  winName.document.head.innerHTML = head;
  winName.document.body.innerHTML = bdHtml;
  winName.focus(); //聚焦保证页面正常
  setTimeout(() => {
    winName.print();
  }, 500);
}

let type = ref() //编辑/查看
let id = ref()
let dataList =ref([])
let dataListLength = ref()
  // 初始化
  const contentHeight = ref(0)
  const tableHeight = ref(0)
  onMounted(async () => {
    contentHeight.value = document.body.clientHeight - 127
    tableHeight.value = document.body.clientHeight - 300
     type.value = route.query.type
     id.value = route.query.id
      queryParam.value = await ProductionPrepareSendApi.getProductionPrepareSend(id.value)
      list.value = queryParam.value.productionPrepareDetailRespVOS
      dataList.value=[]
      dataList.value.push(list.value)
      dataListLength.value = dataList.value[0].length
  })
</script>
<style lang="scss" scoped>
  .contentView {
    padding: 10px;
    background: #fff;
  }
  .isBtn{
    color: #3fa1e6;
  }

  .tableView {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
        text-align: center;
      }
    }
  }
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  // .el-table .custom-header::before {
  //   content: '*';
  //   color: red;
  //   margin-right: 4px; /* 根据需要调整小红星与字段的位置 */
  // }
  .dropdown-width {
    width: 50px !important;
  }
  :deep(.el-form .el-input, .el-form .el-input__wrapper, .el-form .el-textarea) {
    width: 100% !important;
  }
  .select-wrapper {
    display: flex;
    align-items: center;
  }

  .search-icon {
    margin-left: -24px; /* 这里的 -24px 是根据 Icon 的宽度进行调整的 */
    cursor: pointer;
    margin-top: 5px;
  }
</style>
